:root {
	/* Layout variables */
	--switch-height: 1.25rem;
	--switch-width: 2rem;
	--switch-padding: 0.125rem;
	--switch-duration: 200ms;
	--switch-ease: cubic-bezier(0.4, 0, 0.2, 1);

	/* Thumb sizes */
	--switch-thumb-size: 0.75rem;
	--switch-thumb-size-disabled: 0.625rem;
	--switch-thumb-translate: 0.75rem;

	/* Colors */
	--switch-background-color: hsl(0, 0%, 92%);
	--switch-background-color-dark: hsl(0, 0%, 20%);
	--switch-background-color-hover: hsl(0, 0%, 82%);
	--switch-background-color-hover-dark: hsl(0, 0%, 16.08%);
	--switch-background-color-checked: hsl(227.94, 100%, 60%);
	--switch-background-color-checked-dark: hsl(228.07, 69.8%, 48.04%);
	--switch-background-color-disabled: hsl(0, 0%, 100%);
	--switch-background-color-disabled-dark: hsl(0, 0%, 9.02%);
	--switch-thumb-background-color: hsl(0, 0%, 100%);
	--switch-thumb-background-color-dark: hsl(0, 0%, 96.86%);
	--switch-thumb-background-color-disabled: hsl(0, 0%, 96.86%);
	--switch-thumb-background-color-disabled-dark: hsl(0, 0%, 20%);

	/* Shadows */
	--switch-shadow-thumb: 0 0 0 1px hsl(0, 0%, 92.16%);
	--switch-shadow-thumb-dark: 0 0 0 1px hsl(0, 0%, 20%);
	--switch-focus-ring: hsl(228, 100%, 60%);
	--switch-focus-ring-dark: hsl(228.07, 69.8%, 48.04%);
	--switch-focus-shadow: 0 0 0 2px var(--switch-focus-ring);
	--switch-focus-shadow-dark: 0 0 0 2px var(--switch-focus-ring-dark);
}

/* Root switch wrapper */
.root {
	display: block;
	height: var(--switch-height);
	width: var(--switch-width);
	flex-shrink: 0;
	padding: var(--switch-padding);
	outline: none;
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
	white-space: nowrap;
	border: 0;
	background: none;
	border-radius: 9999px;
}

/* Switch track */
.track {
	position: relative;
	height: calc(var(--switch-height) - 2 * var(--switch-padding));
	width: calc(var(--switch-width) - 2 * var(--switch-padding));
	border-radius: 9999px;
	padding: var(--switch-padding);
	background-color: var(--switch-background-color);
	outline: none;
	transition: all var(--switch-duration) var(--switch-ease);
}

:global(.c15t-dark) .track {
	background-color: var(--switch-background-color-dark);
}

/* Track states */
.track:hover {
	background-color: var(--switch-background-color-hover);
}

:global(.c15t-dark) .track:hover {
	background-color: var(--switch-background-color-hover-dark);
}

.track:focus-visible {
	background-color: var(--switch-background-color-hover);
}

:global(.c15t-dark) .track:focus-visible {
	background-color: var(--switch-background-color-hover-dark);
}

.track:active {
	background-color: var(--switch-background-color);
}

:global(.c15t-dark) .track:active {
	background-color: var(--switch-background-color-dark);
}

.root[data-state="checked"] .track {
	background-color: var(--switch-background-color-checked);
}

:global(.c15t-dark) .root[data-state="checked"] .track {
	background-color: var(--switch-background-color-checked-dark);
}

.root[data-state="checked"]:hover .track {
	background-color: var(--switch-background-color-checked);
}

:global(.c15t-dark) .root[data-state="checked"]:hover .track {
	background-color: var(--switch-background-color-checked-dark);
}

/* Disabled states */
.root[data-disabled] {
	cursor: not-allowed;
}

.root:focus {
	outline: none;
}

:global(.c15t-dark) .root:focus {
	outline: none;
}

.track-disabled {
	background-color: var(--switch-background-color-disabled);
	opacity: 0.4;
	box-shadow: inset 0 0 0 1px hsl(0, 0%, 92.16%);
}

:global(.c15t-dark) .track-disabled {
	background-color: var(--switch-background-color-disabled-dark);
}

.root[data-state="checked"] .track-disabled {
	background-color: var(--switch-background-color-checked);
	opacity: 0.4;
	box-shadow: none;
}

:global(.c15t-dark) .root[data-state="checked"] .track-disabled {
	background-color: var(--switch-background-color-checked-dark);
}

/* Switch thumb */
.thumb {
	position: relative;
	display: block;
	pointer-events: none;
	width: var(--switch-thumb-size);
	height: var(--switch-thumb-size);
	transition: transform var(--switch-duration) var(--switch-ease);
	transform: translateX(0);
}

/* Thumb states */
.thumb::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 100%;
	border-radius: 9999px;
	background-color: var(--switch-thumb-background-color);
	mask:
		radial-gradient(
			circle farthest-side at 50% 50%,
			#0000 1.95px,
			#000 2.05px 100%
		)
		50% 50% / 100% 100% no-repeat;
}

:global(.c15t-dark) .thumb::before {
	background-color: var(--switch-thumb-background-color-dark);
}

.thumb::after {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 100%;
	border-radius: 9999px;
	box-shadow: var(--switch-shadow-thumb);
}

:global(.c15t-dark) .thumb::after {
	box-shadow: var(--switch-shadow-thumb-dark);
}

.root[data-state="checked"] .thumb {
	transform: translateX(var(--switch-thumb-translate));
}

.root[dir="rtl"][data-state="checked"] .thumb {
	transform: translateX(calc(-1 * var(--switch-thumb-translate)));
}

.track:active .thumb {
	transform: scale(0.833);
}

/* Disabled thumb */
.thumb-disabled {
	box-shadow: none;
}

.root[data-state="checked"] .thumb-disabled {
	transform: translateX(var(--switch-thumb-translate));
}

.root:focus-visible {
	outline: none;
	box-shadow: var(--switch-focus-shadow);
}

:global(.c15t-dark) .root:focus-visible {
	box-shadow: var(--switch-focus-shadow-dark);
}
